<template>
    <div class="popoverbtnbox">
        <el-button size="small" :type="type" :icon="icon" ref="buttonRef" v-click-outside="onClickOutside">{{text}}</el-button>
        <el-popover ref="popoverRef" :virtual-ref="buttonRef" :trigger="trigger" virtual-triggering :placement="placement">
            <ul class="dcxlist">
                <li v-for="dt in lists" :key="dt[showField]" @click="getCurrentItem(dt)">{{dt[showField]}}</li>
            </ul>
        </el-popover>
    </div>
</template>
<script setup>
import { ref, unref,defineProps,defineEmits } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const props = defineProps({
    text:String,
    icon:String,
    lists:Array,
    showField:{// 列表中需要显示的字段
        type:String,
        default:'label' 
    }, 
    type:{
        type:String,
        default:'primary' 
    },
    trigger:{
        type:String,
        default:'click' 
    },
    placement:{
        type:String,
        default:'bottom-start' 
    }
})
const emit = defineEmits(['itemClick'])
const buttonRef = ref()
const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}
const getCurrentItem = (item)=>{
    emit('itemClick',item)
}
</script>
<style lang="scss" scoped>
.popoverbtnbox{
    display: inline-block;
}
.dcxlist{
    padding: 0;
    margin: 0;
    list-style: none;
    li{
        padding: 5px 0;
        &:hover{
            cursor: pointer;
            color: rgb(77, 112, 255);
        }
    }
}
</style>